<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>仪器共享</title>

	<meta name="keywords" content="科研仪器，生命科学仪器，环境检测仪器，实验常用设备，分析仪器">

	<meta name="description" content="中国领先的科研仪器共享平台，让您快速找到各种类型的科学研究仪器。提升闲置仪器利用率，产生更大科研价值。涵盖：生命科学仪器、环境检测仪器、实验常用设备、分析仪器、仪表、物性测试、测量/计量仪器、在线及过程控制仪器。

">
	<!--<link rel="stylesheet" href="new_css/header_footer.css?t=1">-->
	<link rel="stylesheet" href="new_css/publishInstrument.css">
	<link rel="stylesheet" href="new_css/userCenter.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/common.css">
	<script src="method/wf/pageSkip.js"></script>
	<style>
		.header-search-lef .shopping-Mall .logo-mall {
			margin-top: 34px;
		}
		.logo-mall.instrument-management{
			width:74px;
			height:24px;
			background:rgba(237,23,23,1);
			border-radius:2px;
			line-height: 20px;
			text-align: center;
		}
		.logo-mall.instrument-management a{
			font-size: 14px;
			color: #fff;
		}
	</style>
	<style>
		.mainList .content {
			width: 100%;
			display: inline-block;
			height: 1079px;
		}
	</style>
	<style>

		.mainList .content .right{
			padding-top: 18px;
		}
		.mainList .content .right .title .title_btn{
			margin-top: -10px;
		}
		.search-input input#aiya{
			width:208px;
			height:46px;
			border: 1px solid #D3D3D3;
			border-radius: 0px;
		}
		.search-input input#wohenhou{
			width:102px;
			height:46px;
			background:rgba(255,138,0,1);
			color: #ffffff;
			border-radius: 0px;
			margin-left: -5px;
			border: 1px solid rgba(255,138,0,1);
		}

		.select-download-nav{
			margin-left: 20px;
		}
		.select-download-nav select#moni{
			width:208px;
			height:46px;
			border: 1px solid #D3D3D3;
			border-top-left-radius: 0px !important;
		}

		.select-download-nav input#bgf{
			width:102px;
			height:46px;
			background:rgba(255,138,0,1);
			color: #ffffff;
			border-radius: 0px;
			margin-left: -9px;
			border: 1px solid rgba(255,138,0,1);
		}
		.mainList .content .right table th {
			background: #f4f4f4;
			color: #939393;
			font-weight: normal;
			height: 50px;
			width: 950px;
		}

		.mainList .content .right table td {
			/*border: 1px solid #d3d3d3;*/
			text-align: center;
			color: #202020;
			font-size: 14px;
			height: 76px;
		}
		

		#nav-tab{height:50px;}
		#nav-tab a{display:block;height:50px;line-height:50px;padding:0 15px;font-size:18px;font-family: 'Microsoft YaHei';float:left;cursor:pointer;}
		#nav-tab a.on{border-bottom: 2px solid #ff8a00;}
		#contentBox .box1{display:none;}
		#contentBox .box1.active-tab{display:block;}
	</style>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
        $(function() {

            $('#front_header .header_wrap .right').hover(function() {
                $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon2.png');
                $('#front_header .header_wrap .right .out').show();
            }, function() {
                $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon1.png');
                $('#front_header .header_wrap .right .out').hide();
            });

            //-----
            $("#item2").mouseover(function(){
                $(".item2_ul").css("display","block");
            });


            $("#item2").mouseout(function(){
                $(".item2_ul").css("display","none");
            });


            //----
//				$('#item2').on('mouseover',function() {
//					console.log("111111");
//					$('#item2_ul').css('display','block');
//				}
//				$('#item2').on('mouseout',function() {
//					$('#item2_ul').css('display', 'none');
//				}

            $('#sorts').on('mouseover', 'li', function() {
                $(this).find('span img').attr('src', 'images/icon4.png');
            });
            $('#sorts').on('mouseout', 'li', function() {
                $(this).find('span img').attr('src', 'images/icon5.png');
            });

            $('.mainList .content .left li').click(function(){
                $(this).addClass('selected').siblings().removeClass('selected');
            });
        });
	</script>
	<script>
        $(function() {
            $('#front_header .header_wrap .right').hover(function() {
                $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon2.png');
                $('#front_header .header_wrap .right .out').show();
            }, function() {
                $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon1.png');
                $('#front_header .header_wrap .right .out').hide();
            });
            $('#sorts').on('mouseover', 'li', function() {
                $(this).find('span img').attr('src', 'images/icon4.png');
            });
            $('#sorts').on('mouseout', 'li', function() {
                $(this).find('span img').attr('src', 'images/icon5.png');
            });
            $('.mainList .content .left li').click(function() {
                $('.mainList .content .left li').removeClass('selected');
                $(this).addClass('selected');
            });
            $('.mainList .content .left .list_header').click(function() {
                if($('.mainList .content .left .secendList').is(':hidden')) {
                    $('.mainList .content .left .secendList').slideDown();
                    $('.mainList .content .left .list_header img').attr("src", "images/insUser_icon.png");
                } else {
                    $('.mainList .content .left .secendList').slideUp();
                    $('.mainList .content .left .list_header img').attr("src", "images/icon4.png");
                };

            });
            $('.mainList .content .left .list_header1').click(function() {
                if($('.mainList .content .left .secendList1').is(':hidden')) {
                    $('.mainList .content .left .secendList1').slideDown();
                    $('.mainList .content .left .list_header1 img').attr("src", "images/insUser_icon.png");
                } else {
                    $('.mainList .content .left .secendList1').slideUp();
                    $('.mainList .content .left .list_header1 img').attr("src", "images/icon4.png");
                };

            });
        });

	</script>
	<script>
        $(function() {
            $('#front_header .header_wrap .right').hover(function() {
                $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon2.png');
                $('#front_header .header_wrap .right .out').show();
            }, function() {
                $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon1.png');
                $('#front_header .header_wrap .right .out').hide();
            });
            $('#sorts').on('mouseover', 'li', function() {
                $(this).find('span img').attr('src', 'images/icon4.png');
            });
            $('#sorts').on('mouseout', 'li', function() {
                $(this).find('span img').attr('src', 'images/icon5.png');
            });

            $('.mainList .content .left li').click(function() {
                $(this).addClass('selected').siblings().removeClass('selected');
            });
            //				$(".mainList .content .right table td input").each(function(){
            //					var index=$(this).parents('tr').index();
            //					$(this).attr('id','select'+index);
            //					$(this).siblings('label').attr('for','select'+index);
            //				});
            $(".mainList .content .right table td label").click(function() {
                if($(this).siblings('input').is(':checked')){
                    $(this).find('img').attr('src','images/icon35.png');
                    $(this).siblings('input').prop('checked',false);
                }else{
                    $(this).find('img').attr('src','images/icon36.png');
                    $(this).siblings('input').prop('checked',true);
                };
            });

        });
	</script>

</head>

<body style="background:#fff;">

<%@include file="/header5.jsp"%>

<div class="mainList">
	<div class="content">
		<div class="left">
			<div class="title">机构用户</div>
			<ul class="ninu" style="text-align: center">
						<li onclick="li1()" style="text-align: center">仪器管理人员维护</li>
						<li onclick="li2()" style="text-align: center">服务审核</li>
						<li onclick="li3()" style="text-align: center">仪器发布查询</li>
					</ul>

					<ul class="ninu" >	
						<li style="text-align: center" class="list_header">统计分析<img src="images/insUser_icon.png" /></li>
					</ul>
					<ul class="secendList" id="cbdsiac">
						<li onclick="li4()">仪器使用情况分析</a></li>
						<li onclick="li5()">月度经营收入分析</li>
						<li onclick="li6()">预约处理效率分析</li>
						<li onclick="li7()">违约率统计分析</li>
						<li onclick="li8()">用户评价统计分析</li>
					</ul>

			<script>
                var ul = document.getElementById('secendList');
                var lis = ul.getElementsByTagName('li');
                for(var i=0;i<lis.length;i++){
                    lis[i].onclick = function(){
                        document.getElementById("span1").innerHTML = this.innerHTML;
                    }
                }
			</script>

			<script>
                var ul1 = document.getElementById('secendList1');
                var lis1 = ul1.getElementsByTagName('li');
                for(var j=0;j<lis1.length;j++){
                    lis1[j].onclick = function(){
                        document.getElementById("span1").innerHTML = this.innerHTML;
                    }
                }
			</script>




		</div>





		<div class="right">
			<div class="title" id="nav-tab">
				<a class="on" id="span1">仪器使用情况分析</a>
				<a id="span2">仪器使用次数占比情况</a>
			</div>
			<div id="contentBox">
				<table id="analysisTable" class="box1 active-tab">
					<tr>

						<th>仪器类别</th>
						<th>仪器名称</th>
						<th>所属机构</th>
						<th>租用次数</th>
						<th>使用时长</th>
					</tr>

				</table>
				<div class="page-content sun_content box1" >
					<div class="sun_list">
						<div class="sun_king" style="background-color:rgb(243,243,243);">
							<div id="main" style=" margin-top:15px; width:940px;height:765px;background-color: #CCCCCC;padding:40px 20px;"></div>
						</div>
					</div>
				</div>
			</div>

		</div>

	</div>
</div>

<!--page-->
<div class="myPage clearfix" id="pageDiv">
	<!--currentpage="1" numbercount="100"-->
	<ul class="page" maxshowpageitem="5" pagelistcount="9"  id="page"></ul>
</div>

<!--footer-->
<footer>
	<div class="foot clearfix">
		<p>&copy; 2015-2020 科研仪器 版权所有 技术支持：科研仪器共享平台 支持电话：010-123658987 </p>
	</div>
</footer>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript">

    //简单jq tab   index从0开始
    $(function(){
        $("#nav-tab a").off("click").on("click",function(){
            var index = $(this).index();
            $(this).addClass("on").siblings().removeClass("on");
            $("#contentBox .box1").eq(index).addClass("active-tab").siblings().removeClass("active-tab");
        });
    });
    
    $(function(){
	    loadParam = {
			offset : 0,
			limit : 9,
			ouid : organizationId
			//ouid:2
		}
		callbackParam = {
			url :Server+ "/insRelevant/insUsageAnalysis",
			//url :"http://localhost/insRelevant/insUsageAnalysis",
			ouid:organizationId,
			//ouid:2,
			offset : 0,
			limit: 9,
			haveuid : "",
			ishavesend : 1,
			boolean : false,
			type : "POST",
			dataType : "JSON",
			number : 1,
			AllCount : 0,
			nowp : 0,
			Callback : function(nowPage) {
				callbackParam.nowp = nowPage;
				loadParam.offset = nowPage-1;
				Myload(loadParam);
			}
		};
		
		function MyCallback() {
		$("#page").initPage((function() {
			$.ajax({
				url :Server+ "/insRelevant/insUsageAnalysis",
				//url :"http://localhost/insRelevant/insUsageAnalysis",
				"type" : callbackParam.type,
				"dataType" : callbackParam.dataType,
				"async" : callbackParam.boolean,
				"data" : loadParam,
				success : function(data) {
					console.log(data)
					callbackParam.AllCount = data.count;
				}
			});
			return callbackParam.AllCount;
			})(), callbackParam.number, callbackParam.Callback);
		}
		
		typeParam = {
			offset : 0,
			limit : 10,
			pid:0,
			ouid : organizationId
			//ouid:2
		}
		typeCallback = {
			url :Server+ "/insRelevant/insAnalysisByType",
			//url :"http://localhost/insRelevant/insAnalysisByType",
			pid:0,
			ouid:organizationId,
			//ouid:2,
			offset : 0,
			limit: 10,
			haveuid : "",
			ishavesend : 1,
			boolean : false,
			type : "POST",
			dataType : "JSON",
			number : 1,
			AllCount : 0,
			nowp : 0,
			Callback : function(nowPage) {
				typeCallback.nowp = nowPage;
				typeParam.offset = nowPage-1;
				insAnalysisByType(typeParam);
			}
		};
		
		MyCallback();
    });
    
    function Myload(loadParam) {
		$.ajax({
			url :Server+ "/insRelevant/insUsageAnalysis",
			//url :"http://localhost/insRelevant/insUsageAnalysis",
			type : "POST",
			dataType : "JSON",
			data : loadParam,
			success : function(data) {
				var html = "";
				var htmlhead = '<tr>\
					<th style="width:230px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">仪器类别</th>\
					<th style="width:230px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">仪器名称</th>\
					<th style="width:230px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">所属机构</th>\
					<th style="width:130px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">租用次数</th>\
					<th style="width:130px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">使用时长</th>\
				</tr>';
				for (var i = 0; i < data.list.length; i++) {
					var pattern = '<tr>\
						<td style="width:230px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"><a class="typeLabel" val="#0">#1</a> </td>\
						<td style="width:230px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">#2</td>\
						<td style="width:230px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">#3</td>\
						<td style="width:130px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">#4</td>\
						<td style="width:130px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">#5</td>\
					</tr>';
					html += pattern
						//.replace("#0", "new_sun_jigou32?pid="+data.list[i].sitoId+"&name="+data.list[i].sitoName)
						.replace("#0", data.list[i].sitoId)
						.replace("#1", data.list[i].sitoName)
						.replace("#2", data.list[i].chineseName)
						.replace("#3", data.list[i].conUser.unitName)
						.replace("#4", (data.list[i].count == null)?0:data.list[i].count)
						.replace("#5", (data.list[i].serviceTime == null)?0:data.list[i].serviceTime)
				}
				var sum='<tr>\
						<td>合计</td>\
						<td></td>\
						<td></td>\
						<td>'+data.sum+'</td>\
						<td>'+data.serverTime+'</td>\
					</tr>';
				$("#analysisTable").html(htmlhead + html+sum);
				$('.typeLabel').each(function() {
					$(this).click(function() {
						typeParam.pid=$(this).attr("val");
						typeCallback.pid=$(this).attr("val");
						var typeName=$(this).text();
						typeInit();
						$("#span1").text(typeName);
					});
				});
				function typeInit() {
					$("#page").initPage((function() {
						$.ajax({
							url :Server+ "/insRelevant/insAnalysisByType",
							//url :"http://localhost/insRelevant/insAnalysisByType",
							"type" : typeCallback.type,
							"dataType" : typeCallback.dataType,
							"async" : typeCallback.boolean,
							"data" : typeParam,
							success : function(data) {
								typeCallback.AllCount = data.count;
							}
						});
						return typeCallback.AllCount;
						})(), typeCallback.number, typeCallback.Callback);
					}
			},
		})
	}
	
    
    function insAnalysisByType(typeParam) {
		$.ajax({
			url :Server+ "/insRelevant/insAnalysisByType",
			//url :"http://localhost/insRelevant/insAnalysisByType",
			type : "POST",
			dataType : "JSON",
			data : typeParam,
			success : function(data) {
				var html = "";
				var htmlhead ='<tr>\
					<th>仪器名称</th>\
					<th>租用次数</th>\
					<th>使用时长</th>\
				</tr>';
				for (var i = 0; i < data.list.length; i++) {
					var pattern = '<tr>\
						<td>#1</td>\
						<td>#2</td>\
						<td>#3</td>\
					</tr>';
					html += pattern
						.replace("#1", data.list[i].chineseName)
						.replace("#2", (data.list[i].count == null)?0:data.list[i].count)
						.replace("#3", (data.list[i].serviceTime == null)?0:data.list[i].serviceTime)
				}
				$("#analysisTable").html(htmlhead + html);
			},
		})
	}
</script>
 <script>
    $(document).ready(function(){
		$("#span2 ").ready(function(){
		$(".myPage ").show();
		})
    });

    $(document).ready(function(){
		$("#span2 ").click(function(){
			$(".myPage").hide();
    	});
   		 $("#span1 ").click(function(){
			$(".myPage ").show();
			}
    	);
    });
	
    </script>


<script src="js/new_js/echarts.min.js"></script>
<script type="text/javascript">
	var names=[];
	var inner=[];
	var out =[];
	$(
		$.ajax({
			type:"post",
			url:Server+"/usage/getName",
			async:false,
			success:function(res){
				names=res;
			}
		}),
		$.ajax({
			type:"post",
			url:Server+"/usage/getBigReturn",
			async:false,
			success:function(res){
				inner=res;
			}
		}),
		$.ajax({
			type:"post",
			url:Server+"/usage/getSmallReturn",
			async:false,
			success:function(res){
				out=res;
			}
		})

		
	)
    var myChart = echarts.init(document.getElementById('main'));

	option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
         data:names
    },
    series: [
        {
            name:'仪器使用占比',
            type:'pie',
            radius: [0, '30%'],

            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:inner
        },
        {
            name:'仪器使用占比',
            type:'pie',
            radius: ['40%', '55%'],
            data:out
	        }
	    ]
	};

    myChart.setOption(option);
</script>




<style type="text/css">
	.myPage {
    margin: 0 auto;
    width: 844px;
    float: right;
    height: 70px;
}
	td a{
		color: #FF8A00;
	}
	.mainList .content .right table {
    margin-top: 14px;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d3d3d3;
    height: 52px;
    box-shadow: 0 0 10px 2px rgba(254,244,232,0.8);
}
.mainList .content {
    /* width: 100%; */
    /* overflow: hidden; */
    /* height: 1038px; */
    width: 1200px;
    height: 100%;
        min-height: 945px;
    margin-bottom: 0px;
}
.mainList .content .left {
			width: 192px;
			float: left;
			border: 1px solid #d3d3d3;
			height: 100%;
			min-height:910px;
			text-align: center;
/* 			padding-bottom: 18px;
 */		}
.mainList .content .right {
    width: 950px;
    float: right;
    height: 100%;
    min-height: 910px;
    padding: 0 20px;
    border: 1px solid #d3d3d3;
}
</style>
</body>

</html>